<style>
    .el-input__icon{
        display: none !important;
    }
</style>
<template>
	<section>
		<Row :gutter="10">
            <Card>
                <Row>
                    <!--工具条-->
                    <el-col :span="24" class="toolbar" id="serachId">
                        <el-form :inline="true" :model="requestFilters">
                            <el-form-item style="float:right">
                                <el-button type="primary" v-on:click="getRequestList">查询</el-button>
                            </el-form-item>
                            <el-form-item style="float:right;width:200px;">
                                <el-input v-model="requestFilters.requesterName" placeholder="请输入请求方名称"/>
                            </el-form-item>
                            <el-form-item style="float:right;width:200px;">
                                <el-input v-model="requestFilters.providerName" placeholder="请输入服务方名称"/>
                            </el-form-item>
                            <el-form-item style="float:right;width:200px;">
                                <el-input v-model="requestFilters.appNames" placeholder="请输入接口名称"/>
                            </el-form-item>
                            <el-form-item style="float:right;width:150px;">
                                <el-date-picker type="date" v-model="requestFilters.endTime" placeholder="结束时间" style="width: 100%;"/>
                            </el-form-item>
                            <el-form-item style="float:right;width:150px;">
                                <el-date-picker type="date" v-model="requestFilters.startTime" placeholder="开始时间" style="width: 100%;"/>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </Row>
            </Card>
            <Card>
                <el-row class="tac">
                <el-col :span="24" >
                    <!--列表-->
                    <el-table :data="requestData" highlight-current-row v-loading="requestListLoading" style="width: 100%;">
                        <el-table-column type="index" label="序号" min-width="60"/>
                        <el-table-column prop="appNames" label="接口名称" min-width="100"/>
                        <el-table-column prop="requesterName" label="请求方名称" min-width="100"/>
                        <el-table-column prop="uploadBytes" label="上传流量" min-width="100"/>
                        <el-table-column prop="providerName" label="服务方名称" min-width="100"/>
                        <el-table-column prop="downloadBytes" label="下载流量" min-width="100"/>
                    </el-table>
                    <!--工具条-->
                    <el-col :span="24" class="toolbar">
                        <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange_request"
                                        :current-page="pageNum_request" :page-size="pageSize_request" :total="total_request">
                        </el-pagination>
                    </el-col>
                </el-col>
                </el-row>
            </Card>
		</Row>
	</section>
</template>

<script>

	import util from '../api/utils'
	import { getServiceApiMonitorList } from '../api/api';

	export default {
		data() {
			return {
                activeName: 'first',
				requestFilters: {
                    endTime: new Date(),
                    startTime: new Date(),
                    requesterName:'',
                    providerName:'',
                    appNames:''
				},
				requestData: [],
				total_request: 0,
				pageNum_request: 1,
				pageSize_request:10,
                requestListLoading: false,
			}
		},
		methods: {
            handleClick(tab, event) {
				if(tab.name === 'first'){
                    this.getRequestList();
                }else if(tab.name === 'second'){
                    this.getServiceList();
				}
            },
			handleCurrentPageChange_request: function (pageNum) {// 翻页动作
                this.pageNum_request = pageNum;
                this.getRequestList();// 翻页后刷新页面数据
            },
			//获取请求方列表
			getRequestList() {
				let params = {
					pageNum: this.pageNum_request,
                    pageSize: this.pageSize_request,
                    startTime: this.requestFilters.startTime,
                    endTime: this.requestFilters.endTime,
                    requesterName: this.requestFilters.requesterName,
                    providerName: this.requestFilters.providerName,
                    appNames: this.requestFilters.appNames
				};
				this.requestListLoading = true;
                getServiceApiMonitorList(params).then(function(result){
					this.requestData = result.data.data.list;
					this.pageNum_request = result.data.data.pageNum;
					this.pageSize_request = result.data.data.pageSize;
					this.total_request = result.data.data.total;
					this.requestListLoading = false;
				}.bind(this)).catch(function (error) {
					this.requestListLoading = false;
					console.log(error);
				}.bind(this));
            },
		},
		mounted() {
			this.getRequestList();
		}
	}

</script>
